<template>
  <div v-if="detailAuth">
    <page-header
      :title="
        params.target == 2
          ? $t('m.Frachisees_profit')
          : $t('m.Merchants_profit')
      "
      :has-return="false"
      :has-returns="true"
      @click="returnHandle"
    ></page-header>
    <!--容器-->
    <div class="container">
      <div class="box_index">
        <!-- 搜索栏 -->
        <div class="list_div">
          <div class="page_list_div">
            <el-form class="page_list_top" label-position="right">
              <el-form-item
                :label="$t('m.search_') + ':'"
                class="page_list_top"
              >
                <el-input
                  :placeholder="$t('m.Shop_revenue_Order')"
                  prefix-icon="el-icon-search"
                  style="width:330px;"
                  clearable
                  v-model="params.search"
                />
              </el-form-item>

              <el-form-item
                :label="$t('m.Finance_Transaction_date') + ':'"
                class="page_list_top"
              >
                <el-date-picker
                  style="width:246px;"
                  v-model="params.rangeTime"
                  :picker-options="datePickerOptions"
                  :default-value="timeDefaultShow"
                  type="daterange"
                  :default-time="['00:00:00', '23:59:59']"
                  value-format="timestamp"
                  format="yyyy-MM-dd"
                  range-separator="~"
                  :start-placeholder="$t('m.start_date')"
                  :end-placeholder="$t('m.end_date')"
                >
                </el-date-picker>
              </el-form-item>
              <el-form-item
                :label="$t('m.Users_Details_Type') + ':'"
                class="page_list_top"
              >
                <el-select v-model="params.type">
                  <el-option
                    v-for="item in optionsState"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item class="page_list_top page_list_search">
                <el-button class="reset_button" @click="searchClick('')">{{
                  $t('m.search_')
                }}</el-button>
              </el-form-item>
              <el-form-item class="page_list_top page_list_search">
                <el-button class="reset_button" @click="searchClick('1')">{{
                  $t('m.refresh')
                }}</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>

        <!--分割线-->
        <div class="line"></div>

        <!-- 表格栏 -->
        <div class="table-box">
          <fast-table :options="fastTableOptions" :data="page.records" />
          <!-- 分页 -->
          <pagination
            :total="page.total"
            :current="page.current"
            :size="page.size"
            @changePageSize="changePageSize"
            @changePageNum="changePageNum"
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import pagination from '@/components/pagination.vue'
import page from '@/mixins/page'
import SearchBar from '@/components/search-bar.vue'
import FastTable from '@/components/fast-table.vue'

export default {
  components: { FastTable, SearchBar, pagination },
  mixins: [page],
  data () {
    return {
      datePickerOptions: {
        disabledDate (time) {
          let current_time = new Date().Format('yyyy-MM-dd') + ' 23:59:59' //时间日期为：‘当前日期 23:59:59’
          let t = new Date(current_time).getTime() //‘当前日期 23:59:59’的时间戳
          return time.getTime() > t
        }
      },
      params: {
        agentId: '',
        branchId: '',
        rangeTime: '',
        search: '',
        state: '',
        target: '',
        type: ''
      },

      fastTableOptions: {
        columns: [
          {
            label: this.$t('m.branch_Profit_ID'),
            prop: 'id'
          },
          {
            label: this.$t('m.serialNumber_Order'),
            prop: 'orderNo'
          },
          {
            label: this.$t('m.Finance_Payment'),
            prop: 'amount',
            formatter: row => this.$format.amountFormat(row.amount)
          },
          {
            label: this.$t('m.Users_Details_Type'),
            prop: 'type',
            formatter: row =>
              this.$format.stateFormat(row.type, this.optionsState)
          },

          {
            label: this.$t('m.Finance_Transaction_date'),
            prop: 'createTime',
            formatter: row => this.$format.dateformat(row.createTime)
          }
        ]
      },

      optionsState: [
        { value: '', label: this.$t('m.all') },
        { value: 1, label: this.$t('m.orderDivide') },
        { value: 3, label: this.$t('m.Finance_Rental_refund') }
      ],
      queryParams: '',
      activeValue: '',
      detailAuth: this.permissionsId(61)
    }
  },
  created () {
    if (!this.detailAuth) {
      return
    }
    this.params = this.$options.data.call(this).params
    this.queryParams = JSON.parse(this.$route.query.params)
    this.params.target = this.queryParams.target
    this.activeValue = this.queryParams.activeValue
    this.params.agentId =
      this.queryParams.target == 2 ? this.queryParams.id : ''
    this.params.branchId =
      this.queryParams.target == 4 ? this.queryParams.id : ''
    this.page = this.$options.data.call(this).page
    this.getPage()
    this.timeDefaultShow = new Date()
    this.timeDefaultShow.setMonth(new Date().getMonth() - 1)
  },

  methods: {
    searchClick (reset) {
      this.page = this.$options.data.call(this).page
      if (reset) {
        this.params = this.$options.data.call(this).params
        this.timeDefaultShow = new Date()
        this.timeDefaultShow.setMonth(new Date().getMonth() - 1)
      }
      this.params.target = this.queryParams.target
      this.params.agentId =
        this.queryParams.target == 2 ? this.queryParams.id : ''
      this.params.branchId =
        this.queryParams.target == 4 ? this.queryParams.id : ''
      this.getPage()
    },
    getPage () {
      this.$api.finance.getBrokeragesList(this.params, this.page).then(res => {
        if (this.$ok(res)) {
          this.page = res.data
        }
      })
    },
    returnHandle () {
      this.$router.push({
        name: '/finance/overview',
        params: { activeName: '3', target: this.queryParams.target, activeValue: this.activeValue  }
      })
    },

  }
}
</script>

<style scoped lang="scss"></style>
